<%--
  Created by IntelliJ IDEA.
  User: 22816
  Date: 2024/10/28
  Time: 14:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>list</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <style>
    </style>
</head>
<body>
<div style="padding: 16px;">
    <table class="layui-hide" id="test" lay-filter="test"></table>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getData">获取当前页数据</button>
        <button class="layui-btn layui-btn-sm" id="dropdownButton">
            下拉按钮
            <i class="layui-icon layui-icon-down layui-font-12"></i>
        </button>
        <button class="layui-btn layui-btn-sm layui-bg-blue" id="reloadTest">
            重载测试
            <i class="layui-icon layui-icon-down layui-font-12"></i>
        </button>
        <button class="layui-btn layui-btn-sm layui-btn-primary" id="rowMode">
            <span>{{= d.lineStyle ? '多行' : '单行' }}模式</span>
            <i class="layui-icon layui-icon-down layui-font-12"></i>
        </button>
    </div>
</script>
<script type="text/html" id="toolDemo">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs" lay-event="more">
            更多
            <i class="layui-icon layui-icon-down"></i>
        </a>
    </div>
</script>
<script src="/static/layui/layui.js"></script>
<script>
    layui.use(function () {
        var table = layui.table;
        var dropdown = layui.dropdown;
        var $ = layui.$;
        // 创建渲染实例
        table.render({
            elem: '#test',
            url: '/asyncuser/list', // 此处为静态模拟数据，实际使用时需换成真实接口
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print', { // 右上角工具图标
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips',
                onClick: function (obj) { // 2.9.12+
                    layer.alert('自定义工具栏图标按钮');
                }
            }],
            css: [ // 重设当前表格样式
                '.layui-table-tool-temp{padding-right: 145px;}'
            ].join(''),
            cellMinWidth: 80,
            totalRow: true, // 开启合计行
            page: true,
            cols: [[
                {type: 'checkbox', fixed: 'left'},
                {field: 'id', fixed: 'left', width: 80, title: 'ID', sort: true, totalRow: '合计：'},
                {field: 'name', title: '用户'},
                {field: 'pass', title: '密码'},
                {fixed: 'right', title: '操作', width: 134, minWidth: 125, templet: '#toolDemo'}
            ]],
            done: function () {
                var id = this.id;
                // 下拉按钮测试
                dropdown.render({
                    elem: '#dropdownButton', // 可绑定在任意元素中，此处以上述按钮为例
                    data: [{
                        id: 'add',
                        title: '添加'
                    }, {
                        id: 'update',
                        title: '编辑'
                    }, {
                        id: 'delete',
                        title: '删除'
                    }],
                    // 菜单被点击的事件
                    click: function (obj) {
                        var checkStatus = table.checkStatus(id)
                        var data = checkStatus.data; // 获取选中的数据
                        switch (obj.id) {
                            case 'add':
                                layer.open({
                                    title: '添加用户',
                                    type: 2,
                                    area: ['680px', '520px'],
                                    content: '/asyncuser/toadd',
                                    fixed: false, // 不固定
                                    maxmin: true,
                                    shadeClose: true,
                                    btn: ['立即提交', '取消'],
                                    btnAlign: 'c',
                                    yes: function (index, layero) {
                                        // 获取 iframe 的窗口对象
                                        var iframeWin = window[layero.find('iframe')[0]['name']];
                                        var elemName = iframeWin.$('#name'); // 获得 iframe 中某个输入框元素
                                        var name = elemName.val();

                                        if ($.trim(name) === '') {
                                            layer.msg('请输入用户名');
                                            return elemName.focus();
                                        }
                                        var elemPass = iframeWin.$('#pass'); // 获得 iframe 中某个输入框元素
                                        var pass = elemPass.val();

                                        if ($.trim(pass) === '') {
                                            layer.msg('请输入密码');
                                            return elemPass.focus();
                                        }
                                        //异步新增请求
                                        $.ajax({
                                            url: '/asyncuser/addSave',
                                            type: 'post',
                                            data: {name: name, pass: pass},
                                            dataType: 'json',
                                            success: function (res) {
                                                layer.close(index);
                                                layer.msg(res.msg);
                                                if (res.code === 0) {
                                                    // 重载表格
                                                    table.reload('test');
                                                }
                                            }
                                        })
                                        // 显示获得的值
                                        layer.msg('获得 iframe 中的输入框标记值：' + value);
                                    }
                                });
                                break;
                            case 'update':
                                if (data.length !== 1) return layer.msg('请选择一行');
                                layer.open({
                                    title: '编辑',
                                    type: 2,
                                    area: ['80%', '80%'],
                                    content: '/asyncuser/toupdate?id=' + encodeURIComponent(data[0].id),
                                    fixed: false, // 不固定
                                    maxmin: true,
                                    shadeClose: true,
                                    btn: ['立即提交', '取消'],
                                    btnAlign: 'c',
                                    yes: function (index, layero) {
                                        // 获取 iframe 的窗口对象
                                        var iframeWin = window[layero.find('iframe')[0]['name']];

                                        // 使用 iframeWin.document 来查找元素
                                        var elemName = iframeWin.$('#name'); // 获得 iframe 中某个输入框元素
                                        var name = elemName.val();
                                        console.log("Name:", name); // 查看获取到的值
                                        if ($.trim(name) === '') {
                                            layer.msg('请输入用户名');
                                            return elemName.focus();
                                        }

                                        var elemPass = iframeWin.$('#pass'); // 获得 iframe 中某个输入框元素
                                        var pass = elemPass.val();
                                        console.log("Password:", pass); // 查看获取到的密码
                                        if ($.trim(pass) === '') {
                                            layer.msg('请输入密码');
                                            return elemPass.focus();
                                        }
                                        //异步新增请求
                                        $.ajax({
                                            url: '/asyncuser/updateSave',
                                            type: 'post',
                                            data: {name: name, pass: pass, id: data[0].id},
                                            dataType: 'json',
                                            success: function (res) {
                                                layer.close(index);
                                                layer.msg(res.msg);
                                                if (res.code === 0) {
                                                    // 重载表格
                                                    table.reload('test');
                                                }
                                            },
                                            error: function () {
                                                layer.msg('操作失败，请稍后重试');
                                            }
                                        })
                                    }
                                });
                                break;

                                case 'delete':
                                    if (data.length === 0) return layer.msg('请选择一行');
                                    var ids = [];
                                    for (var i = 0; i < data.length; i++) {
                                        ids.push(data[i].id);
                                    }
                                    layer.confirm('确定删除吗？', function (index) {
                                        $.ajax({
                                            url: '/asyncuser/delete',
                                            type: 'post',
                                            data: {ids: ids},
                                            dataType: 'json',
                                            success: function (res) {
                                                layer.msg(res.msg);
                                                if (res.code === 0) {
                                                    // 重载表格
                                                    table.reload('test');
                                                }
                                            },
                                            error: function () {
                                                layer.msg('操作失败，请稍后重试');
                                            }
                                        });
                                    });
                                    break;





                        }
                    }
                });

                // 重载测试
                dropdown.render({
                    elem: '#reloadTest', // 可绑定在任意元素中，此处以上述按钮为例
                    data: [{
                        id: 'reload',
                        title: '重载'
                    }, {
                        id: 'reload-deep',
                        title: '重载 - 参数叠加'
                    }, {
                        id: 'reloadData',
                        title: '仅重载数据'
                    }, {
                        id: 'reloadData-deep',
                        title: '仅重载数据 - 参数叠加'
                    }],
                    // 菜单被点击的事件
                    click: function (obj) {
                        switch (obj.id) {
                            case 'reload':
                                // 重载 - 默认（参数重置）
                                table.reload('test', {
                                    where: {
                                        abc: '123456',
                                    },
                                });
                                break;
                            case 'reload-deep':
                                // 重载 - 深度（参数叠加）
                                table.reload('test', {
                                    where: {
                                        abc: 123,
                                        test: '新的 test1'
                                    },
                                    //defaultToolbar: ['print'], // 重载头部工具栏右侧图标
                                    //cols: ins1.config.cols
                                }, true);
                                break;
                            case 'reloadData':
                                // 数据重载 - 参数重置
                                table.reloadData('test', {
                                    where: {
                                        abc: '123456',
                                        //test: '新的 test2',
                                        //token: '新的 token2'
                                    },
                                    scrollPos: 'fixed',  // 保持滚动条位置不变 - v2.7.3 新增
                                    height: 2000, // 测试无效参数（即与数据无关的参数设置无效，此处以 height 设置无效为例）
                                    //url: '404',
                                    //page: {curr: 1, limit: 30} // 重新指向分页
                                });
                                break;
                            case 'reloadData-deep':
                                // 数据重载 - 参数叠加
                                table.reloadData('test', {
                                    where: {
                                        abc: 123,
                                        test: '新的 test1'
                                    }
                                }, true);
                                break;
                        }
                        layer.msg('可观察 Network 请求参数的变化');
                    }
                });

                // 行模式
                dropdown.render({
                    elem: '#rowMode',
                    data: [{
                        id: 'default-row',
                        title: '单行模式（默认）'
                    }, {
                        id: 'multi-row',
                        title: '多行模式'
                    }],
                    // 菜单被点击的事件
                    click: function (obj) {
                        var checkStatus = table.checkStatus(id)
                        var data = checkStatus.data; // 获取选中的数据
                        switch (obj.id) {
                            case 'default-row':
                                table.reload('test', {
                                    lineStyle: null // 恢复单行
                                });
                                layer.msg('已设为单行');
                                break;
                            case 'multi-row':
                                table.reload('test', {
                                    // 设置行样式，此处以设置多行高度为例。若为单行，则没必要设置改参数 - 注：v2.7.0 新增
                                    lineStyle: 'height: 95px;'
                                });
                                layer.msg('即通过设置 lineStyle 参数可开启多行');
                                break;
                        }
                    }
                });
            },
            error: function (res, msg) {
                console.log(res, msg)
            }
        });

        // 工具栏事件
        table.on('toolbar(test)', function (obj) {
            var id = obj.config.id;
            var checkStatus = table.checkStatus(id);
            var othis = lay(this);
            switch (obj.event) {
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(layui.util.escape(JSON.stringify(data)));
                    break;
                case 'getData':
                    var getData = table.getData(id);
                    console.log(getData);
                    layer.alert(layui.util.escape(JSON.stringify(getData)));
                    break;
            }
            ;
        });
        // 表头自定义元素工具事件 --- 2.8.8+
        table.on('colTool(test)', function (obj) {
            var event = obj.event;
            console.log(obj);
            if (event === 'email-tips') {
                layer.alert(layui.util.escape(JSON.stringify(obj.col)), {
                    title: '当前列属性配置项'
                });
            }
        });

        // 触发单元格工具事件
        table.on('tool(test)', function (obj) { // 双击 toolDouble
            var data = obj.data; // 获得当前行数据
            // console.log(obj)
            if (obj.event === 'edit') {
                layer.open({
                    title: '编辑',
                    type: 2,
                    area: ['80%', '80%'],
                    content: '/asyncuser/toupdate?id=' + encodeURIComponent(data.id),
                    fixed: false, // 不固定
                    maxmin: true,
                    shadeClose: true,
                    btn: ['立即提交', '取消'],
                    btnAlign: 'c',
                    yes: function (index, layero) {
                        // 获取 iframe 的窗口对象
                        var iframeWin = window[layero.find('iframe')[0]['name']];

                        // 使用 iframeWin.document 来查找元素
                        var elemName = iframeWin.$('#name'); // 获得 iframe 中某个输入框元素
                        var name = elemName.val();
                        console.log("Name:", name); // 查看获取到的值
                        if ($.trim(name) === '') {
                            layer.msg('请输入用户名');
                            return elemName.focus();
                        }

                        var elemPass = iframeWin.$('#pass'); // 获得 iframe 中某个输入框元素
                        var pass = elemPass.val();
                        console.log("Password:", pass); // 查看获取到的密码
                        if ($.trim(pass) === '') {
                            layer.msg('请输入密码');
                            return elemPass.focus();
                        }
                        //异步新增请求
                        $.ajax({
                            url: '/asyncuser/updateSave',
                            type: 'post',
                            data: {name: name, pass: pass, id: data.id},
                            dataType: 'json',
                            success: function (res) {
                                layer.close(index);
                                layer.msg(res.msg);
                                if (res.code === 0) {
                                    // 重载表格
                                    table.reload('test');
                                }
                            },
                            error: function () {
                                layer.msg('操作失败，请稍后重试');
                            }
                        })
                    }
                });
            } else if (obj.event === 'more') {
                // 更多 - 下拉菜单
                dropdown.render({
                    elem: this, // 触发事件的 DOM 对象
                    show: true, // 外部事件触发即显示
                    data: [{
                        title: '查看',
                        id: 'detail'
                    }, {
                        title: '删除',
                        id: 'del'
                    }],
                    click: function (menudata) {
                        if (menudata.id === 'detail') {
                            layer.msg('查看操作，当前行 ID:' + data.id);
                        } else if (menudata.id === 'del') {
                            if (!Array.isArray(data)) {
                                data = [data]; // 如果 data 不是数组，将其转换为数组
                            }
                            var ids = data.map(function (item) {
                                return item.id;
                            });
                            layer.confirm('真的删除行 [id: ' + ids.join(', ') + '] 么', function (index) {
                                layer.close(index);
                                // 向服务端发送删除指令
                                $.ajax({
                                    url: '/asyncuser/delete',
                                    type: 'post',
                                    data: {ids: ids},
                                    dataType: 'json',
                                    success: function (res) {
                                        layer.close(index);
                                        layer.msg(res.msg);
                                        if (res.code === 0) {
                                            // 重载表格
                                            table.reload('test');
                                        }
                                    },
                                    error: function () {
                                        layer.msg('操作失败，请稍后重试');
                                    }
                                });
                            });
                        }
                    },
                    align: 'right', // 右对齐弹出
                    style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' // 设置额外样式
                })
            }
        });

        // 触发表格复选框选择
        table.on('checkbox(test)', function (obj) {
            console.log(obj)
        });

        // 触发表格单选框选择
        table.on('radio(test)', function (obj) {
            console.log(obj)
        });

        // 行单击事件
        table.on('row(test)', function (obj) {
            console.log(obj);
            layer.closeAll('tips');
        });
        // 行双击事件
        table.on('rowDouble(test)', function (obj) {
            console.log(obj);
        });

        // 单元格编辑事件
        table.on('edit(test)', function (obj) {
            console.log(obj)
        });
    });
</script>
</body>
</html>